<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .scrollNews {
         height: 60px;
         overflow: hidden;
    }

    ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul li {
        height: 30px;
    }
</style>
<body>
<div class="scrollNews">
    <ul>
        <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">1.</a></li>
        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">2.</a></li>
        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">3.</a></li>
        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">4.</a></li>
        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">5.</a></li>
        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">6.</a></li>
    </ul>
</div>
</body>
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
    $(function () {
        var settimes;//定时器
        var $this = $(".scrollNews");

        //方法
        function scrollNews(nature) {
            var scroll = nature.find("ul:first");
            var lineHeight = scroll.find("li:first").height();
            scroll.animate({"margin-top": -lineHeight + "px"}, 600, function () {
                scroll.css({'margin-top':0}).find("li:first").appendTo(scroll);
            });
        }

          //悬停事件
          $this.hover(function () {
              clearInterval(settimes);//清楚定时器
          }, function () {
              settimes = setInterval(function () {
                  scrollNews($this);
              }, 3000);
          })
    });
</script>
</html>
--------------------- 
版权声明：本文为CSDN博主「水里飞鸟」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39522730/article/details/84931667